<template>
    <div class="topic">
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px">
                <el-input size="mini" v-model="form.title" clearable placeholder="请输入广告标题"></el-input>
                <el-input size="mini" v-model="form.subtitle" clearable placeholder="请输入广告内容"></el-input>
                <el-select v-model="form.sort" placeholder="请选择" size="mini" clearable>
                    <el-option label="按序号排序" value="id"></el-option>
                    <el-option label="按时间排序" value="add_time"></el-option>
                    <el-option label="按价格排序" value="price"></el-option>
                </el-select>
                <div class="btn-top">
                    <el-button type="primary" size="small" icon="el-icon-search" @click="handleSerch">查找</el-button>
                    <el-button type="primary" size="small" icon="el-icon-upload" @click="handleDown">导出</el-button>
                </div>
            </el-form>
            <div class="btn-bottom">
                <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelits">批量删除</el-button>
            </div>
        </div>
        <el-table ref="multipleTable" :data="tableData" highlight-current-row tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="title" label="专题标题"> </el-table-column>
            <el-table-column prop="subtitle" label="专题子标题" width="220">
            </el-table-column>
            <el-table-column prop="picUrl" label="图片" width="120">
                <template slot-scope="scope">
                    <img style="width: 40px; height: 40px" :src="scope.row.picUrl" alt="" />
                </template>
            </el-table-column>
            <el-table-column label="专题详情">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleDet(scope.row)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="低价"> </el-table-column>
            <el-table-column prop="readCount" label="阅读量"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelte(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="obj.currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="obj.rows"
            layout="total, sizes, prev, pager, next, jumper" :total="obj.total">
        </el-pagination>
        <el-dialog title="专题详情" :visible.sync="dialogVisible">
            <div v-html="mtk.content"></div>
        </el-dialog>
    </div>
</template>

<script>
import * as XLSX from "xlsx";
import { Topiclist, Topicudelete, Topicbatchdelete } from "@/api/tggl/ztgl";
export default {
    data() {
        return {
            form: {},
            tableData: [],
            ruleForm: {},
            obj: {
                page: 1,
                rows: 20,
                currentPage: 1,
                total: null,
            },
            dialogVisible: false,
            mtk: [],
            multipleSelection: [],
        };
    },
    methods: {
        // 初始化
        fun() {
            const params = {
                page: this.obj.page,
                limit: this.obj.rows,
                sort: "add_time",
                order: "desc",
            };
            Topiclist(params).then((res) => {
                this.tableData = res.data.list;
                this.obj.total = res.data.total;
            });
        },
        // 查询
        handleSerch() {
            const params = {
                page: this.obj.page,
                limit: this.obj.rows,
                title: this.form.title,
                subtitle: this.form.subtitle,
                sort: this.form.sort,
                order: "desc",
            };
            Topiclist(params).then((res) => {
                this.tableData = res.data.list;
                this.obj.total = res.data.total;
            });
        },
        // 查看
        handleDet(row) {
            this.dialogVisible = true;
            this.mtk = row;
        },
        // 添加
        handleAdd() {
            this.$router.push("topic-create");
        },
        // 编辑
        handleEdit(row) {
            this.$router.push({
                // 打开子页面
                path: "topic-create",
                query: {
                    id: row.id,
                },
            });
        },
        // 删除
        handleDelte(row) {
            Topicudelete(row).then((res) => {
                this.$notify({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                });
                this.fun();
            });
        },
        // 批量删除
        handleDelits() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    type: "error",
                    message: "请选择至少一条记录",
                });
                return;
            }
            const ids = this.multipleSelection.map((row) => row.id);
            const params = {
                ids: ids,
            };
            Topicbatchdelete(params).then((res) => {
                this.$notify({
                    title: "成功",
                    message: "删除成功",
                    type: "success",
                });
                this.fun();
            });
        },
        // 导出
        handleDown() {
            const data = this.tableData.map((item) => {
                return {
                    专题ID: item.id === null ? '暂无' : item.id,
                    专题标题: item.title === null ? "暂无" : item.title,
                    专题子标题: item.subtitle === null ? "暂无" : item.subtitle,
                    专题内容: item.content === null ? "暂无" : item.content,
                    专题图片: item.picUrl === null ? "暂无" : item.picUrl,
                    专题低价: item.price === null ? "暂无" : item.price,
                    阅读数量: item.readCount === null ? "暂无" : item.readCount,
                };
            });
            const ws = XLSX.utils.json_to_sheet(data);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "专题管理");
            XLSX.writeFile(wb, "专题管理.xlsx");
        },
        // 取消
        handleFalse() {
            this.dialogVisible = false;
            this.fun();
        },
        handleSizeChange(val) {
            this.obj.rows = val;
            this.fun();
        },
        handleCurrentChange(val) {
            this.obj.page = val;
            this.fun();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
    },
    mounted() {
        this.fun();
    },
};
</script>

<style lang="scss" scoped>
.topic::v-deep {
    margin: 20px;

    .top {
        .el-form {
            display: flex;

            .el-input {
                width: 200px;
            }

            .btn-top {
                margin-left: 10px;

                .el-button--small {
                    padding: 7.5px 15px;
                }
            }
        }
    }

    .btn-bottom {
        margin-top: 20px;
        text-align: right;

        .el-button {
            padding: 7.5px 15px;
        }
    }

    .el-table {
        margin-top: 10px;

        td {
            padding: 8px 0;
        }

        .cell {
            font-size: 12px;
            text-align: center;
        }
    }

    .el-pagination {
        margin-top: 50px;
    }

    .el-dialog {
        .el-input__inner {
            width: 300px;
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }
}
</style>